useContext

useContext 소개

React에서 useContext는 컴포넌트 트리 전반에 걸쳐 데이터를 효율적으로 공유할 수 있도록 도와주는 훅입니다. 일반적으로, 데이터를 여러 컴포넌트에 전달하려면 부모에서 자식으로 props를 계속 전달해야 하는데, 이는 복잡하고 불편할 수 있습니다. useContext를 사용하면 이러한 불편함을 줄이고 데이터를 간단하게 공유할 수 있습니다.

Context 생성 및 사용 방법

Context 생성

먼저, 데이터를 공유할 Context를 생성해야 합니다. React.createContext를 사용하면 됩니다.

import React, { createContext } from 'react';

// 초기값을 설정하여 Context 생성
const MyContext = createContext('default value');

Provider를 통해 값 전달

Context를 생성한 후, Provider를 사용해 데이터를 전달합니다. Provider는 Context를 구독하는 컴포넌트에게 값을 전달하는 역할을 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <MyContext.Provider value="Hello, World!">
    <App />
  </MyContext.Provider>,
  document.getElementById('root')
);

useContext로 값 사용

useContext 훅을 사용하여 Context의 값을 컴포넌트에서 사용할 수 있습니다.

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

Props와의 차이점

useContext를 사용하면 props를 통해 데이터를 전달하지 않아도 되므로, 컴포넌트 구조가 단순해지고 유지 보수가 쉬워집니다. 반면, props는 부모에서 자식으로 데이터를 명시적으로 전달하는 방식으로, 컴포넌트 간의 데이터 흐름을 명확하게 이해할 수 있게 해줍니다. 상황에 따라 적절한 방식을 선택해야 합니다.

주의할 점

최적화 문제

useContext는 Context 값이 변경되면 해당 Context를 구독하는 모든 컴포넌트가 리렌더링됩니다. 따라서 빈번한 값 변경이 발생하는 경우 성능 문제가 생길 수 있습니다. 이러한 경우 useReducer나 useState와 같은 훅을 함께 사용하는 것을 고려해볼 수 있습니다.
단일 책임 원칙

Context를 너무 많이 사용하면 컴포넌트가 많은 책임을 가지게 되어 유지 보수가 어려워질 수 있습니다. 따라서, Context를 사용하더라도 각 Context가 단일 책임을 가지도록 설계하는 것이 좋습니다.

코드 예제

다음은 useContext를 사용하여 테마를 관리하는 간단한 예제입니다.

import React, { createContext, useContext, useState } from 'react';

// 테마 Context 생성
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext);
  
  return (
    <button
      style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
    >
      Toggle Theme
    </button>
  );
}

export default App;

위 예제에서, ThemeContext를 사용하여 앱 전반에서 테마를 쉽게 관리하고 변경할 수 있습니다. Provider는 theme과 setTheme을 전달하며, useContext 훅을 사용해 ThemedButton 컴포넌트에서 이 값을 사용합니다.

더 알아보기

Context API: Context의 동작 원리와 추가 기능에 대해 더 알아보세요. React 공식 문서
useReducer: 복잡한 상태 로직을 단순화하고 성능을 최적화할 수 있는 방법을 알아보세요. React 공식 문서

내용 요약

useContext 훅은 React에서 여러 컴포넌트에 데이터를 쉽게 공유할 수 있게 해줍니다. Context를 생성하고 Provider로 값을 전달한 후, useContext 훅을 사용하여 해당 값을 가져옵니다. 이를 통해 props 전달의 번거로움을 줄이고 컴포넌트 구조를 단순화할 수 있습니다. 하지만, 너무 자주 사용하면 성능 문제와 단일 책임 원칙 위반이 발생할 수 있으므로 주의해야 합니다.

useContext 소개​

Context 생성 및 사용 방법​

Props와의 차이점​

주의할 점​

코드 예제​

더 알아보기​

내용 요약​